/**
 * Footer
 */

 import CallItem from "./interact/CallItem";
 import WebsiteItem from "./interact/WebsiteItem";
 import DownloadItem from "./interact/DownloadItem";
 import LocationItem from "./interact/LocationItem";
 import IntroduceItem from "./interact/IntroduceItem";
 import PlayvideoItem from "./interact/PlayvideoItem";
 import PagejumpItem from "./interact/PagejumpItem";
 import AnimationItem from "./interact/AnimationItem";
 import MaterialsItem from "./interact/MaterialsItem";
 import AnimationsItem from "./interact/AnimationsItem";
 import SearchNearByItem from "./interact/SearchNearByItem";
 import ShareItem from "./interact/ShareItem";
 import SubmitItem from "./interact/SubmitItem";
 import consts from "../../../../consts/consts";
 import React ,{Component} from "react";

 class Footer extends Component{
    componentWillMount(){
        this.types = {
            call: $._("Call Me"),
            website: $._("Web Link"),
            download: $._("APP DownLoad"),
            location: $._('navigation position'),
            introduce: $._('View expand introduction'),
            playVideo: $._("Play Video"),
            pagejump: $._("Page skip"),
            animation: $._("Trigger"),
            materials: $._('Change model map'),
            animations: $._('Play model action'),
            nearby: $._("Search nearby"),
            form: $._('submit form'),
        };
        this.shareWays = {
            0: "分享到微信",
            1: "分享到朋友圈",
            2: "分享到微博",
        }
        this.items = {
            call: CallItem,
            website: WebsiteItem,
            download: DownloadItem,
            location: LocationItem,
            introduce: IntroduceItem,
            playVideo: PlayvideoItem,
            pagejump: PagejumpItem,
            animation: AnimationItem,
            materials: MaterialsItem,
            animations: AnimationsItem,
            nearby: SearchNearByItem,
            form: SubmitItem,
            share: ShareItem,
        };
    }
    createTarget(){
        const {type,data,pages,timelines,updateWidget,setState} = this.props;
        let resource = this.items[type];
        if (resource){
            let item = React.createElement(
                this.items[type],
                {
                    key: data.id,
                    data: data,
                    timelines: timelines,
                    pages: pages,
                    updateWidget: updateWidget,
                    setState: setState
                }
            );
            return item;
        }
        return "";
    }
    handleOnChangeStatus(){
        const {data,updateWidget,setState} = this.props;
        data.readOnly = !data.readOnly;

        setState({selectedWidget: data});
        updateWidget(data);
    }
    render(){
        const {type,data} = this.props;
        let share_way = data.action ? data.action.share_way : "";
        let name = this.types[type] || this.shareWays[share_way],
            details = this.createTarget();
        let removeNode = "";
        if(data.type != consts.WIDGET_TYPE.FIXEDBTN){//模板中浮屏按键不能去除事件
            removeNode = 
                    <div onClick={() => this.handleOnChangeStatus()} className="action">
                        <div className={"action-icon " + (data.readOnly ? "icon-focus" : "icon-blur")}></div>
                        <span>{$._('Remove')}</span>
                    </div>
        }
        return (
            <div className="template-footer">
                <div className="todo">
                    <div className="title">
            {$._('After click')}{ name }
                    </div>
                    {removeNode}
                </div>
                <div className="detail" style={{display: !data.readOnly ? 'block' : 'none'}}>
                { details }
                </div>
            </div>
        )
    }
 }

 module.exports = Footer;
